<template>
	<div class="app-container">
		<div class="row1">
			<span class="left-label">公司属性</span>
			<span class="label">公司分类</span>
			<el-select v-model="queryData.customerCategory" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in customer_category" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<span class="label">所在地区</span>
			<Address
				ref="address"
				style="display: inline-block; position: relative; width: 500px; margin-right: 20px"
				v-model:provinceId="queryData.provinceId"
				v-model:cityId="queryData.cityId"
				v-model:areaId="queryData.areaId" />
		</div>

		<div class="row3">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.customerName" style="width: 350px; margin-right: 20px" placeholder="请输入搜索关键字" />
			<span class="left-label">创建人</span>
			<el-input v-model="queryData.nickName" style="width: 150px; margin-right: 20px" placeholder="请输入搜索关键字" />

			<el-checkbox style="position: relative; top: 3px" true-label="1" false-label="2" v-model="queryData.isOpen" label="公共库" size="large" />
			<el-button type="primary" style="margin-left: 20px" @click="search">搜索</el-button>
			<el-button @click="reset">重置</el-button>
			<el-button v-if="userStore.$state.roles.includes('yw2')" @click="linkToAdd()">添加客户</el-button>
		</div>

		<BaseTable v-loading="loading" :columns="columns" :dataList="dataList">
			<template #customerName="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toDetail(row)">{{ row.customerName }}</span>
			</template>
			<template #flag="{ row }">
				<el-tag v-if="row.flag" class="ml-2">有</el-tag>
				<el-tag v-else class="ml-2" type="info">无</el-tag>
			</template>
			<template #isOpen="{ row }">
				<el-tag v-if="row.isOpen == '1'" class="ml-2">是</el-tag>
				<el-tag v-else class="ml-2" type="info">否</el-tag>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
	</div>
</template>
<script setup>
import { reactive } from 'vue'
import BaseTable from '@/components/BaseTable'
import Address from '@/components/Address/index'
import { listCustom, delCustom, listCustoms } from '@/api/custom/custom'
import { selectGroup } from '@/api/custom/group'
import useUserStore from '@/store/modules/user'
import { useRoute } from 'vue-router'

const route = useRoute()

const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
const { customer_category, customer_type, administration_level, water_supply, is_have_project } = proxy.useDict(
	'customer_category',
	'customer_type',
	'administration_level',
	'water_supply',
	'is_have_project'
)
const prop = defineProps({
	isOpen: String,
	guanjian: String,
	customerCategory: String,
	flag: Boolean,
	newMonth: Boolean
})
const groups = ref([])
const loading = ref(false)
selectGroup().then((res) => {
	groups.value = res.map((e) => {
		return {
			label: e.groupName,
			value: e.groupId
		}
	})
})
const columns = ref([
	{ key: 1, label: `企业名称`, prop: 'customerName', type: 'custom', visible: true },
	{ key: 7, width: '120', label: `创建人`, prop: 'nickName', type: 'text', visible: true },
	{ key: 2, width: '90', label: `项目`, prop: 'flag', type: 'custom', visible: true },
	{ key: 3, width: '100', label: `是否公共库`, prop: 'isOpen', type: 'custom', visible: true },
	{ key: 4, width: '130', label: `客户日志数量`, prop: 'customerLogCount', type: 'text', visible: true },
	{ key: 5, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `更新时间`, prop: 'updateTime', type: 'dateTime', visible: true }
])
const total = ref(0)
const dataList = ref([])

const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	customerCategory: prop.customerCategory,
	customerType: '',
	administrationLevel: '',
	waterSupply: '',
	groupId: '',
	provinceId: undefined,
	cityId: undefined,
	areaId: undefined,
	customerName: prop.guanjian,
	isOpen: prop.isOpen,
	flag: prop.flag,
	newMonth: prop.newMonth,
	createUserCode: route.query.createUserCode,
	resource: route.query.resource,
	nickName: undefined
})
const search = () => {
	loading.value = true
	listCustoms(queryData).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}
search()
const address = ref()
const reset = () => {
	for (let item in queryData) {
		queryData[item] = ''
	}
	queryData.provinceId = undefined
	queryData.cityId = undefined
	queryData.areaId = undefined
	queryData.nickName = undefined
	queryData['isOpen'] = '2'
	queryData.pageNum = 1
	queryData.pageSize = 1000
	search()
}
const linkToAdd = () => {
	router.push({
		path: '/customer/customInfo'
	})
}
const toDetail = (row) => {
	router.push({
		path: '/customer/customDetail',
		query: {
			id: row.customerId
		}
	})
}
</script>
<style lang="scss" scoped>
.left-label {
	color: #33b6fe;
	height: 24px;
	line-height: 24px;
	position: relative;
	top: 1px;
	margin-right: 10px;
	display: inline-block;
	min-width: 80px;
}
:deep(.el-table__header) {
	background-color: #2f3f56;
}
.row1 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
	.label {
		margin: 5px;
		padding: 8px 5px;
		font-size: 14px;
		background-color: rgb(231, 231, 231);
	}
	.select {
		width: 120px;
		position: relative;
		top: -1px;
	}
}
.row2 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row3 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row4 {
	padding: 5px 0 10px 0;
}
</style>
